<template>
    <div>
      <!--    面包屑导航区域-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>班级管理</el-breadcrumb-item>
        <el-breadcrumb-item>创建班级</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card>
        <h1>创建班级</h1>
        <el-button type="text" @click="JumptoClass">
<!--          href="#/ClassInfo"-->
          <el-link >
            查看我的所有班级<i class="el-icon-view el-icon--right"></i>
          </el-link>
        </el-button>

          <el-divider content-position="right"><i class="el-icon-edit"></i></el-divider>
        <el-form status-icon label-width="100px" :model="AddClassForm" :rules="AddClassRules" ref="AddClassFormRef">
          <el-form-item label="教师工号" prop="teachId">
            <el-input v-model="AddClassForm.teachId" disabled></el-input>
          </el-form-item>
          <el-form-item label="教师名字" prop="teachName">
            <el-input v-model="AddClassForm.teachName" disabled></el-input>
          </el-form-item>
          <el-form-item label="班级名称"  prop="className" required>
            <el-input v-model="AddClassForm.className" autocomplete="off" placeholder="请输入1-20个字符作为班级名称"></el-input>
          </el-form-item>
        </el-form>
        <br>
        <el-row :gutter="20">
          <el-col :offset="10">
            <el-button class="new_btn" @click="AddClass">
              <svg class="icon_add" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <polygon id="路径" fill="#FFFFFF" points="11.34223 8.55450006 11.34223 1.52678484 8.5311359 1.52678484 8.5311359 8.55450006 1.50342068 8.55450006 1.50342068 11.3655941 8.5311359 11.3655941 8.5311359 18.3933093 11.34223 18.3933093 11.34223 11.3655941 18.3699652 11.3655941 18.3699652 8.55450006"></polygon>
              </svg>
              创 建
            </el-button>
          </el-col>
        </el-row>
        <br>
        <el-divider>以下是刚刚创建的最新一条班级信息</el-divider>
        <el-row :gutter="20">
          <el-col :offset="11">
            <p style="color: slategray" v-if="!this.showInfo">暂无数据</p>
          </el-col>
        </el-row>
        <el-table :default-sort = "{prop: 'ClassId', order: 'descending'}" v-if="this.showInfo" :data="NewClassForm" :stripe="true">
          <el-table-column fixed type="index" label="#"></el-table-column>
          <el-table-column align="center" prop="ClassId" sortable label="班级编号"></el-table-column>
          <el-table-column align="center" prop="ClassName" label="班级名称"></el-table-column>
          <el-table-column align="center" prop="TechId" sortable label="教师编号"></el-table-column>
          <el-table-column align="center" prop="TechName" label="教师姓名"></el-table-column>
          <!--        操作-->
          <el-table-column label="操作" align="center" width="120" fixed="right">
            <template slot-scope="scope">
              <!--              修改密码按钮-->
              <el-tooltip effect="dark" content="修改班级名称" placement="top">
                <el-button style="background-color: #545c64;color: white" icon="el-icon-edit" size="mini" :enterable="false" @click="showNameDialog(scope.row.ClassId, scope)"></el-button>
              </el-tooltip>
              <!--              删除班级-->
              <el-tooltip effect="dark" content="删除班级" placement="bottom">
                <el-button type="danger" icon="el-icon-delete" size="mini" :enterable="false" @click="DelClass(scope.row.ClassId)"></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <br>
      </el-card>
      <!--    修改用户姓名的对话框-->
      <el-dialog
        title="修改班级名称"
        :visible.sync="nameDialogVisible"
        width="50%" @close="nameDialogClosed" class="role-mask">
        <!--      内容主体区域-->
        <el-form :model="nameForm" status-icon ref="nameFormRef" label-width="100px">
          <el-form-item label="班级编号">
            <el-input v-model="nameForm.id" disabled></el-input>
          </el-form-item>
          <el-form-item label="班级新名称" prop="name" required>
            <el-input v-model="nameForm.name" placeholder="请输入班级新名称" @keyup.enter.native="editName" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <!--      底部区域-->
        <span slot="footer" class="dialog-footer">
          <el-button @click="resetName">重置修改</el-button>
          <el-button type="primary"  @click="editName">确定修改</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
export default {
  name: 'AddClass',
  data () {
    var classname = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入班级名称'))
      } else {
        callback()
      }
    }
    return {
      AddClassForm: {
        className: '',
        teachId: localStorage.getItem('username'),
        teachName: localStorage.getItem('name')
      },
      AddClassRules: {
        className: [{ validator: classname, trigger: 'blur' }, { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }]
      },
      NewClassForm: [{
        ClassName: '',
        ClassId: '',
        TechId: '',
        TechName: ''
      }],
      showInfo: false,
      nameDialogVisible: false,
      nameForm: {
        id: '',
        name: ''
      }
    }
  },
  created () {
  },
  methods: {
    AddClass () {
      this.$refs.AddClassFormRef.validate(async valid => {
        // console.log(valid)
        if (!valid) return
        // 调用接口进行用户添加
        const { data: res } = await this.$http.post('/class/create/', this.AddClassForm)
        if (res.status !== 200) {
          return this.$message.error('创建班级失败！')
        }
        this.$message.success('创建班级成功!')
        console.log(res)
        console.log(this.AddClassForm)
        this.NewClassForm[0].ClassId = res.data.classId
        this.NewClassForm[0].ClassName = this.AddClassForm.className
        this.NewClassForm[0].TechId = this.AddClassForm.teachId
        this.NewClassForm[0].TechName = this.AddClassForm.teachName
        console.log(this.NewClassForm[0].TechName)
        this.showInfo = true
      })
      console.log(this.NewClassForm[0])
    },
    async DelClass (id) {
      const confirmResult = await this.$confirm('此操作将永久删除该班级, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
      ).catch(err => err)
      // 若用户确认删除，则返回值为字符串 confirm
      // 若取消删除，返回 cancel
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const { data: res } = await this.$http.delete('/class/delete/' + id)
      if (res.status !== 200) {
        return this.$message.error('删除班级失败！')
      }
      this.$message.success('删除班级成功!')
      this.showInfo = false
      this.$refs.AddClassFormRef.resetFields()
    },
    resetName () {
      this.$refs.nameFormRef.resetFields()
    },
    showNameDialog (id) {
      this.nameForm.id = id
      this.nameDialogVisible = true
    },
    // 监听修改姓名对话框的关闭事件
    nameDialogClosed () {
      this.$refs.nameFormRef.resetFields()
    },
    // 点击按钮，修改班级名称
    editName () {
      this.$refs.nameFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.put('/class/updateName/', {
          classId: this.nameForm.id,
          className: this.nameForm.name
        })
        if (res.status !== 200) {
          return this.$message.error('更新班级名称失败!')
        }
        this.$message.success('更新班级名称成功！')
        this.NewClassForm[0].ClassName = this.nameForm.name
        this.nameDialogVisible = false
      })
    },
    JumptoClass(){
      this.$router.push('ClassInfo')
      window.sessionStorage.setItem('activePath', 'ClassInfo')
      this.$router.go(0)
    }
  }
}
</script>

<style scoped>
  /* 顶部下划线 */
  .role-mask .el-dialog__header{
    border-bottom: 2px solid cornflowerblue;
    padding: 20px;
  }
  .role-mask .el-dialog__title{
    font-size: 19px;
    color: #3A68C6;
  }.new_btn{
     background: #545c64;
     color: white;
     letter-spacing: 2px;
   }
  .new_btn:hover,.new_btn:focus{
    background: #545c99;
    color: ghostwhite;
    letter-spacing: 2px;
  }
  .icon_add{
    width: 24px;
    height: 24px;
    padding-right: 4px;
    vertical-align:middle;
  }
</style>
